<template>
  <div class="SearchSong">
    <div class="tip">找到{{ songCount }}首单曲</div>
    <div class="multiMatch" v-if="multiMatch.artist">
      <div class="matchTitle">最佳匹配</div>
      <div class="matchResult">
        <div class="img">
          <img :src="multiMatch.artist[0].img1v1Url" alt="" />
        </div>
        <div class="singName">歌手：{{ multiMatch.artist[0].name }}</div>
        <div class="icon"><i class="iconfont icon-right-1-copy"></i></div>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="searchSongList"
        stripe
        style="width: 100%"
        lazy
        highlight-current-row
        @row-dblclick="clickRow"
      >
        <el-table-column label="" width="40" type="index"> </el-table-column>
        <el-table-column width="60">
          <i class="iconfont icon-xiazai"></i>
        </el-table-column>
        <el-table-column prop="name" label="音乐标题" min-width="350">
        </el-table-column>
        <el-table-column prop="ar[0].name" label="歌手" min-width="120">
        </el-table-column>
        <el-table-column prop="al.name" label="专辑" min-width="170">
        </el-table-column>
        <el-table-column prop="dt" label="时长" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.dt | handleMusicTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="songCount"
      :current-page="currentPage"
      @current-change="changPage"
      al
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Searchsong",

  data() {
    return {
      multiMatch: {},
      searchSongList: [],
      songCount: 0,
      // 当前页数
      currentPage: 1,
    };
  },

  created() {
    this.getMultMath();
    this.getSearchSong();
  },
  computed: {
    ...mapState(["musicList", "currentIndex", "musicListId"]),
  },
  methods: {
    ...mapMutations([
      "updateMusicId",
      "changePlayState",
      "updateMusicId",
      "updateMusicList",
      "updateCurrentRowInfo",
    ]),
    //   获取最佳匹配
    async getMultMath() {
      const { data: res } = await this.$http("search/multimatch", {
        params: {
          keywords: this.$route.params.id,
        },
      });
      this.multiMatch = res.result;
      console.log(this.multiMatch);
    },
    //   获取搜索歌曲详情数据
    async getSearchSong() {
      const { data: res } = await this.$http("cloudsearch", {
        params: {
          keywords: this.$route.params.id,
          offset: (this.currentPage - 1) * 30,
        },
      });
      this.songCount = res.result.songCount;
      this.searchSongList = res.result.songs;
    },
    // 当页数发生变化时
    changPage(page) {
      this.currentPage = page;
      this.getSearchSong();
    },
    // 点击row事件回调
    async clickRow(row) {
      // console.log(row);
      // 这里双击应该是要把当前双击的歌曲插入到当前的歌单中
      // 首先获取当前的歌单列表和歌曲索引
      let musicList = this.musicList;
      let currentIndex = this.currentIndex;
      // 先判断该歌曲是否已经在歌单中存在，避免重复点击导致歌单出现相同歌曲
      let isExit = musicList.find((item) => {
        item.id == row.id;
      });
      if (isExit) {
        this.updateMusicId(row.id);
        return;
      }
      this.changePlayState(false);
      // 将请求到的歌曲详情插入到歌单对应位置并提交至vuex
      musicList.splice(currentIndex + 1, 0, row);
      this.updateMusicId(row.id);
      this.updateMusicList({ musicList, musicListId: this.musicListId });
      // 将歌曲信息传给歌词卡片界面
      this.updateCurrentRowInfo(row);
    },
  },
};
</script>

<style lang="less" scoped>
.SearchSong {
  width: 90%;
  margin: 0 auto;
}
.tip {
  font-size: 20px;
  font-weight: 700;
}
.multiMatch {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  .matchTitle {
    font-size: 15px;
  }
  .matchResult {
    margin-top: 10px;
    display: flex;
    align-items: center;
    background-color: #f4f4f4;
    width: 400px;
    height: 100px;
    border-radius: 15px;
    justify-content: space-between;
    .img {
      width: 100px;
      height: 100px;
      border-radius: 15px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 15px;
      }
    }
    .icon {
      margin-right: 20px;
      i {
        font-size: 20px;
      }
    }
  }
}
</style>